<template>
    <div class="body">
      <page-header>
        <template #hd-icon>
          <el-icon><Edit /></el-icon>
        </template>
        <template #hd-title>
          智能导诊自查
        </template>
        <template #hd-desc>
          输入症状，我们将为您快速提供可能的疾病诊断，帮助您及时采取措施。
        </template>
      </page-header>
      <main class="page__bd">
        <!-- 患者输入主诉 -->
        <el-card class="user-ask">
          <div class="user-ask__tips">
            🤒 哪里不适？请告诉我：
          </div>
          <el-input
            type="textarea"
            placeholder="请输入您的症状"
            clearable
            maxlength="200"
            show-word-limit
            resize="none"
            v-model="userAsk"
          />
          <div class="user-ask__tags">
            <el-tag
              v-for="(tag, index) in userAskTags"
              :key="index"
              closable
              @close="handleClose(tag)"
            >
              {{ tag.label }}
            </el-tag>
          </div>
          <div class="user-ask__btns">
            <el-button type="primary" size="large" @click="audioChangeWord" :loading="isListening" :icon="Microphone">
              语音输入
            </el-button>
            <el-button type="primary" size="large" @click="submitUserAsk" :icon="Promotion">
              提交
            </el-button>
          </div>
    
        </el-card>
        <!-- 患者选择标签 -->
        <el-card class="symptom-tags">
          <div class="symptom-tags__tips">
            🏷️ 或者，您也可以选择下列症状描述您的不适：
          </div>
          <div class="symptom-tags__displayer">
            <div class="symptom-tags__btn" @click="symptomTagsPrev" :class="{'symptom-tags__btn--disabled': symptomPage == 0}">
              <el-icon><ArrowLeftBold /></el-icon>
            </div>
            <div class="symptom-tags__container">
              <div class="symptom-tags__tag" v-for="(item,index) in symptomTags" :key="index" @click="submitUserAskWithArgument(item.label)" :class="{'symptom-tags__tag--selected': userAskTags.find(tag => tag.label === item.label)}">
                <div class="tage__title">
                  {{ item.label }}
                </div>
              </div>
            </div>
            <div class="symptom-tags__btn" @click="symptomTagsNext" :class="{'symptom-tags__btn--disabled': symptomPage == symptomPageCount - 1}">
              <el-icon><ArrowRightBold /></el-icon>
            </div>
          </div>
        </el-card>
      </main>
    </div>
    </template>
    
    <script setup>
    import { ref, reactive } from 'vue'
    import { symptoms } from '../assets/data/symptoms.json'
    import PageHeader from '../components/PageHeader.vue';
    import { ElMessage } from 'element-plus'
    import { Microphone, Promotion } from '@element-plus/icons-vue'
    import { useRouter } from 'vue-router'
    
    
    const router = useRouter()
    const userAsk = ref('');
    const userAskTags = reactive([]);
    //语言转文字
    const isListening = ref(false); // 判断是否在语音监听中
    
    // 症状分页显示
    const symptomPage = ref(0);
    const symptomPageSize = 32;
    const symptomPageCount = Math.ceil(symptoms.length / symptomPageSize);
    
    const symptomTags = ref(symptoms.slice(0, symptomPageSize)); // 当前页的症状标签
    
    const symptomTagsNext = () => {
      if (symptomPage.value < symptomPageCount - 1) {
        symptomPage.value++;
        symptomTags.value = symptoms.slice(symptomPage.value * symptomPageSize, (symptomPage.value + 1) * symptomPageSize);
      }
    }
    
    // 取消选择症状标签
    const handleClose = (tag) => {
      userAskTags.splice(userAskTags.indexOf(tag), 1);
    }
    
    // 选择症状标签
    const selectSymptom = (item) => {
      // 判断是否已经选择过
      // 如已选择，则取消选择
      if (userAskTags.find(tag => tag.label === item.label)) {
        handleClose(item);
      } else {
        userAskTags.push(item);
      }
    }
    
    const symptomTagsPrev = () => {
      if (symptomPage.value > 0) {
        symptomPage.value--;
        symptomTags.value = symptoms.slice(symptomPage.value * symptomPageSize, (symptomPage.value + 1) * symptomPageSize);
      }
    }
    
    // 语音转文字
    const audioChangeWord = function() {
      userAsk.value = "";
      // 创建SpeechRecognition对象
      // eslint-disable-next-line no-undef
      let recognition = new webkitSpeechRecognition();
      if (!recognition) {
        // eslint-disable-next-line no-undef
        recognition = new SpeechRecognition();
      }
      // 设置语言
      recognition.lang = "zh-CN";
      // 开始语音识别
      recognition.start();
      isListening.value = true;
      // 监听识别结果
      recognition.onresult = function (event) {
        let result = event.results[0][0].transcript;
        userAsk.value = result;
      };
    
      // 监听错误事件
      recognition.onerror = function (event) {
        isListening.value = false;
        ElMessage("监听语音失败:" + event.error);
        console.error(event.error);
      };
      // 监听结束事件（包括识别成功、识别错误和用户停止）
      recognition.onend = function () {
        isListening.value = false;
        console.log("语音识别停止");
      };
    }
    
    function submitUserAsk() {
      router.push({ name: 'selfCheckResult', params: { 'symptom': userAsk.value } });
    }

    function submitUserAskWithArgument(value) {
      router.push({ name: 'selfCheckResult', params: { 'symptom': value } });
    }
    </script>
    
    <style lang="scss" scoped>
    $symptom-updownbtn-bg: #dd4444;
    $symptom-updownbtn-bg-disabled: #ddd;
    $symptom-tags-bg: #f5f5f5;
    
    .page__bd {
      padding: 1rem;
      
      .user-ask {
        height: 23vh;
        .user-ask__tips {
          font-size: 1.5rem;
          margin-bottom: 1rem;
        }
        .user-ask__tags {
          margin-bottom: 0.25rem;
        }
        .user-ask__btns {
          display: flex;
          justify-content: end;
        }
      }
      .symptom-tags {
        height: 50vh;
        margin-top: 1rem;
        .symptom-tags__tips {
          height: 5vh;
          font-size: 1.5rem;
        }
        .symptom-tags__displayer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .symptom-tags__btn {
            height: 40vh;
            background: $symptom-updownbtn-bg;
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            font-size: 2rem;
            cursor: pointer;
          }
          .symptom-tags__btn--disabled {
            background: $symptom-updownbtn-bg-disabled;
            cursor: not-allowed;
          }
          .symptom-tags__container {
            height: 40vh;
            flex: 8;
            display: flex;
            flex-wrap: wrap;
            justify-content: baseline;
            align-items: start;
            .symptom-tags__tag {
              width: 12.5%;
              box-sizing: border-box;
              height: 10vh;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid #ddd;
              border-radius: 0.5rem;
              cursor: pointer;
              .tage__title {
                font-size: 1.5rem;
              }
            }
            .symptom-tags__tag--selected {
              background: #dd4444;
              color: #fff;
            }
          }
        }
      }
    }
    </style>